<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../asserts/plugins/jquery-3.6.0.min.js"></script>
    <script src="../asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <script>
        $(function () {
            // 当前页
            let currentPage = 1;
            // 每页几条数据
            let len = 3;
            //通用：上一页、下一页、跳转指定页
            $("#next_btn").click(function () {
                currentPage += 1;
                $("select").change();
            });
            $("#prior_btn").click(function () {
                currentPage -= 1;
                $("select").change();
            })
            $("#goPage_btn").click(function () {
                currentPage = $("input[name=goPage]").val();
                $("select").change();
            })

            // 展示用户信息
            function getUsers(){
                $(".container thead").html('<tr><th>用户id</th><th>用户名</th><th>密码</th><th>用户类型</th><th>余额</th><th>性别</th><th>手机号</th><th>操作</th></tr>');
                let $tbody = $(".container tbody");
                $tbody.text('');
                $.ajax({
                    url:"/KunKunMarket/AdminController",
                    type:"get",
                    dataType:"json",
                    data:{
                        type: 'getUserPageList',
                        currentPage:currentPage,
                        len:len
                    },
                    success:function (respBean) {
                        if (respBean.status == 500){
                            alert(respBean.msg);
                            return;
                        }
                        currentPage = respBean.data.currentPage;
                        $("#currentPage").text(currentPage);

                        var trs = [];
                        for (let i=0; i<respBean.data.data.length; i++){
                            trs[i] = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
                            trs[i][0].childNodes[0].innerText = respBean.data.data[i].id;
                            trs[i][0].childNodes[1].innerText = respBean.data.data[i].username;
                            trs[i][0].childNodes[2].innerText = respBean.data.data[i].password;

                            if (respBean.data.data[i].user_type == 0){
                                trs[i][0].childNodes[3].innerText = '用户';
                            }else {
                                trs[i][0].childNodes[3].innerText = '商家';
                            }
                            trs[i][0].childNodes[4].innerText = respBean.data.data[i].money;
                            trs[i][0].childNodes[5].innerText = respBean.data.data[i].sex;
                            trs[i][0].childNodes[6].innerText = respBean.data.data[i].phone;
                            trs[i][0].childNodes[7].innerHTML = '<button class="edit_thisUserTr">编辑</button> <button class="del_thisUserTr" >删除</button>';
                            $tbody.append(trs[i]);
                        }
                        $(".del_thisUserTr").click(del_thisUserTr);//给删除按钮添加点击事件
                    }
                })
            }
            // 页面初次加载，默认展示用户信息
            getUsers();
            $("select[name=getUsersOrCommoditys]").val('用户信息');

            // 删除本行的用户
            function del_thisUserTr() {
                let $tr = $(this).parents("tr");
                let id = $tr.find("td")[0].innerText;
                $.ajax({
                    url:"/KunKunMarket/AdminController",
                    type:"get",
                    dataType:"json",
                    data:{
                        type:"deleteUser",
                        id:id
                    },
                    success:function (respBean) {
                        alert(respBean.msg);
                        if (respBean.status == 200){
                            $("select").change();
                        }
                    }
                })
            }


            // 展示商品信息
            function getCommoditys(){
                console.log("展示商品");
                $(".container thead").html('<tr><th>商品id</th><th>商品名</th><th>图片</th><th>库存</th><th>价格</th><th>所属用户</th></tr>');
                let $tbody = $("tbody").text("");
                $.ajax({
                    url:"/KunKunMarket/AdminController",
                    type:"get",
                    dataType:"json",
                    data:{
                        type: 'getCommodityPageList',
                        currentPage:currentPage,
                        len:len
                    },
                    success:function (respBean) {
                        if (respBean.status == 500){
                            alert(respBean.msg);
                            return;
                        }
                        currentPage = respBean.data.currentPage;
                        $("#currentPage").text(currentPage);

                        let trs = [];
                        for (let i=0; i<respBean.data.data.length; i++){
                            trs[i] = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
                            trs[i][0].childNodes[0].innerText = respBean.data.data[i].id;
                            trs[i][0].childNodes[1].innerText = respBean.data.data[i].name;

                            let img_url = respBean.data.data[i].img_url;
                            let img = $("<img src=''>");
                            img.attr('src', img_url);
                            img.attr("style", "height: 100px");
                            trs[i][0].childNodes[2].appendChild(img[0]);

                            trs[i][0].childNodes[3].innerText = respBean.data.data[i].stock;
                            trs[i][0].childNodes[4].innerText = respBean.data.data[i].price;
                            trs[i][0].childNodes[5].innerText = respBean.data.data[i].user_id;
                            trs[i][0].childNodes[6].innerHTML = '<button class="edit_thisCommodityTr">编辑</button> <button class="del_thisCommodityTr" >删除</button>';
                            $tbody.append(trs[i]);
                            trs[i].attr("style","line-height: 100px");
                            console.log(trs[i]);
                        }
                        $(".del_thisCommodityTr").click(del_thisCommodityTr);//给删除按钮添加点击事件
                    }
                })
            }
            //删除本行的商品信息
            function del_thisCommodityTr() {
                let $tr = $(this).parents("tr");
                let id = $tr.find("td")[0].innerText;
                $.ajax({
                    url:"/KunKunMarket/AdminController",
                    type:"get",
                    dataType:"json",
                    data:{
                        type:"deleteCommodity",
                        id:id
                    },
                    success:function (respBean) {
                        alert(respBean.msg);
                        if (respBean.status == 200){
                            $("select").change();
                        }
                    }
                })
            }

            $("select").change(function () {
                len = $("input[name=len]").val();
                if (this.value == '商品信息'){
                    getCommoditys();
                }else {
                    getUsers();
                }
            })



        })
    </script>
    <style>

    </style>
</head>
<body>

    <div class="container">
        <select name="getUsersOrCommoditys">
            <option value="用户信息">用户信息</option>
            <option value="商品信息">商品信息</option>
        </select>
        <button id="prior_btn">上一页</button>
        <span id="currentPage"></span>
        <button id="next_btn">下一页</button>
        <button id="goPage_btn">跳转到</button>
        <input type="number" name="goPage" value="1" placeholder="跳转到第几页">
        每页 <input type="number" name="len" value="3"> 条数据

        <table class="table">
            <thead>

            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
</html>